<template>
	<div>
		<elhead></elhead>
		<!--轮播图、登录、新闻-->
		<div class="contentWidth content1">
			<div class="swppier">
				<el-carousel trigger="click" :interval="3000" height="275px">
					<el-carousel-item><img src="../assets/imgs/slide1.jpg" /></el-carousel-item>
					<el-carousel-item><img src="../assets/imgs/slide2.jpg" /></el-carousel-item>
					<el-carousel-item><img src="../assets/imgs/slide3.jpg" /></el-carousel-item>
					<el-carousel-item><img src="../assets/imgs/slide4.jpg" /></el-carousel-item>
				</el-carousel>
			</div>
			<div class="news">
				<el-tabs style="height: 350px;">
					<el-tab-pane label="新闻动态">
						<news-list class="news" :isShowHeader="xwdtIsShowHeader" :datalist="industryTableData"></news-list>
						</el-tab-pane>
					<el-tab-pane label="行业咨询">行业咨询</el-tab-pane>
				</el-tabs>
			</div>
			<my-login class="login"></my-login>
		</div>
		<!--中 间图片-->
		<div class="contentWidth"><img src="../assets/imgs/main.png" /></div>
		<!--新闻 -->
		<div>
			<div class="contentWidth content2">
				<div class="item1">
					<!--第一行 -->
					<div class="row1">
						<!-- 通知广告-->
						<news-list class="tzgg" :datalist="adverList" :isShowHeader="tjwzIsShowHeader" :newsTypeName="tzggTypeName"></news-list>
						<!-- 推荐文章-->
                        <news-list class="tjwz" :datalist="articleList" :isShowHeader="tjwzIsShowHeader" :newsTypeName="tjwzTypeName"></news-list>	
					</div>
					<!--第二行 -->
					<div class="row2">
						<div class="header zjzs_header">
							<div class="title">专家展示</div>
							<div><a href="#">更多></a></div>
						</div>
						<div>
							<news-list :datalist="industryTableData" :isShowHeader="isShowheader" :newsTypeName="testTypeName" class="test"></news-list></div>
					</div>
				</div>
					<news-list class="item2" :datalist="commentsList" :isShowHeader="tjwzIsShowHeader" :newsTypeName="jcplTypeName"></news-list>	
			
			</div>
		</div>
		<div>
		
		</div>
	</div>
</template>

<script>
import elhead from './elhead';

import newsList from '../components/newsList.vue';
import myLogin from '../components/myLogin.vue'
export default {
	name: 'index',
	components: {
		elhead,
		newsList,
		myLogin
	},
	data() {
		return {
			xwdtIsShowHeader: false,
			tjwzIsShowHeader: true,
			tjwzTypeName:'推荐文章',
			tzggTypeName:'通知广告',
			jcplTypeName:'精彩评论',
			testTypeName:'测试标题',
			isShowheader:false,
			newsList: [
				{
					id: '',
					title: '',
					ndate: ''
				}
			],
			loginForm: {
				username: '',
				password: '',
				isExpert: false
			},
			errormsg: '请输入用户名和密码',
			industryTableData: [
				{
					id: 1,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				},
				{
					id: 2,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				},
				{
					id: 3,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				},
				{
					id: 4,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				},
				{
					id: 5,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				},
				{
					id: 6,
					title: '没江元何千更向中使直际东可济圆万动际。',
					rtext: '2014-04-21'
				}
			],
			adverList: [
				{
					id: 1,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 2,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 3,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 4,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 5,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 6,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 7,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				},
				{
					id: 8,
					title: '关于评选2018年山东省医学协会图书',
					rtext: '2018-10-18'
				}
			],
		articleList:[
			{
			  id:1,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:2,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:3,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:4,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:5,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:6,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:7,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			},
			{
			  id:8,
			  url:'http://www.baidu.com',
			  title: '人民日报聚焦地方政治生态，肃清腐败余毒',
			  rtext:'张晓波'
			}
		],
		commentsList:[{
			id:1,
			url:'http://www.baidu.com',
			title: '早该如此了，不知道多少贪官老虎还在逍遥法外',
			 rtext:''
		},
			{
			  id:2,
			  url:'http://www.baidu.com',
			  title: '保持定力，我党威武',
			  newSource:'原文章：凭风借好力，转正正当时'
			},{
			  id:3,
			  url:'http://www.baidu.com',
			  title: '老百姓终于看到希望了，希望国家能真正重视起来',
			  rtext:''
			},{
			  id:4,
			  url:'http://www.baidu.com',
			  title: '早该如此了，不知道多少贪官老虎还在逍遥法外',
			   rtext:''
			},
			{
			  id:5,
			  url:'http://www.baidu.com',
			  title: '保持定力，我党威武',
			  rtext:''
			},
			{
			  id:6,
			  url:'http://www.baidu.com',
			  title: '保持定力，我党威武',
			  rtext:''
			},
			{
			  id:7,
			  url:'http://www.baidu.com',
			  title: '保持定力，我党威武',
			  rtext:''
			},
			{
			  id:8,
			  url:'http://www.baidu.com',
			  title: '保持定力，我党威武',
			  rtext:''
			}
			]
		};
	}
};
</script>

<style scoped="scoped" lang="less">
.content1 {
	margin-top: 20px;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	height:275px;
	.swppier,
	.news,
	.login {
		
	}
	.swppier,
	.news {
		width: 430px;
		/deep/ .dynews li {
			background-image: url(../assets/imgs/BluelistStyle.jpg);
		}
	}
	/*登录*/
	.login {
		width:275px;
		
	}
	}


::v-deep .el-tabs__nav-wrap::after {
	background: none;
}
::v-deep .el-tabs__item.is-top.is-active {
	background-color: #409eff;
	color: #fff;
}
::v-deep .el-tabs__item.is-top {
	background-color: #cccccc;
	margin-right: 13px;
	width: 135px;
}
.content2 {
	display: flex;
	justify-content: space-between;
	.item1,
	.item2 {
		
	}

	.item1 {
		width: 890px;
		margin-right: 10px;
		.row1 {
			display: flex;
			justify-content: space-between;
			/deep/ .dynews li {
				background-image: url(../assets/imgs/dian.png);
			}

			.tjwz {
				width: 430px;
			}
			.tzgg {
				width: 430px;
			}
		}
		.row2 {
			.zjzs_header {
				background-color: #fff;
				border-bottom: 1px solid #ccc;
			}
		}
	}
	.item2 {
		width:275px;
		/deep/ .dynews li {
			border-bottom: 1px solid #efefef;
		}
	}
}
.test{
	/deep/ .dynews li{
		background-image: url(../assets/imgs/BluelistStyle.jpg);
		border-bottom: 1px solid #ccc;
	}
	
}
.header {
	height: 40px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	background: #efefef;
	padding: 0 10px;
}
.title {
	color: #037edb;
}
</style>
